<template>
  <div id="landlords-content">
    <div id="iframeDiv">
      <iframe src="https://www.w3school.com.cn/tags/tag_iframe.asp" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    <div id="contentDiv">
      <div id="imageEl">
        <el-image style="cursor:pointer;width: 100%;" :src="require('../assets/Snipaste.png')" fit="fill"/>
      </div>
      <div class="textContent" v-html="echoContent"/>
      <el-divider/>
      <div class="textContent" v-html="sayContent" style="max-height: 150px;flex: none;"/>
      <el-input prefix-icon="el-icon-arrow-right" v-model="inputValue" show-word-limit autofocus
                @keyup.enter.native="inputEnter"/>
    </div>
  </div>
</template>

<script>
const url = "ws://localhost:11000/nio";
let Socket;

export default {
  name: 'HelloWorld',
  data() {
    return {
      nickname: '',
      echoContent: '<p>输入 src=https://www.xxx.com 替换左边iframe显示的页面内容</p><p>输入 clear 清空下面内容</p><p>Please enter your nickname：</p>',
      sayContent: '',
      inputValue: '',
      timeout: 20 * 1000,
      timeoutObj: null,
      serverTimeoutObj: null
    }
  },
  updated() {
    let elements = document.getElementsByClassName("textContent");
    for (let element of elements) {
      element.scrollTop = element.scrollHeight;
    }
  },
  methods: {
    createSocket(url) {
      Socket && Socket.close();
      if (!Socket) {
        Socket = new WebSocket(url);
        Socket.onopen = this.onopenWs;
        Socket.onmessage = this.onmessageWs;
        Socket.onclose = this.oncloseWs;
        Socket.onerror = this.onerrorWs;
      }
    },
    onopenWs() {
      console.log("连接成功...");
      this.heartCheckStart();
      Socket.send(this.nickname);
    },
    onmessageWs(ev) {
      console.log("接收消息...");
      this.heartCheckReset();
      if (/^(\[.*]\ssay:)/.test(ev.data)) {
        this.sayContent += "<p>" + ev.data + "</p>";
      } else if (ev.data) {
        this.echoContent += (/^Game Over/.test(ev.data) ? "<p class='red-text'>" : "<p>") + ev.data + "</p>";
      }
    },
    oncloseWs(ev) {
      console.log(ev);
      alert("连接关闭...");
    },
    onerrorWs(ev) {
      console.log(ev);
      alert("连接异常...");
    },
    sendMsg(msg) {
      if (/^(src=)/.test(msg)) {
        let matchStr = msg.match(/^src=(.*)/)[1];
        document.getElementById("iframeDiv").firstElementChild.setAttribute("src", /(http|https):\/\/\S*/.test(matchStr) ? matchStr : 'http://' + matchStr);
        return;
      }
      if (Socket && Socket.readyState === WebSocket.OPEN && msg) {
        console.log("发送消息");
        Socket.send(msg);
      } else if (!this.nickname) {
        console.log("开始准备连接...")
        this.nickname = this.inputValue;
        this.createSocket(url);
      }
    },
    inputEnter() {
      this.inputValue.toLowerCase() === "clear" ? this.clearText() : this.sendMsg(this.inputValue);
      this.inputValue = '';
    },
    clearText() {
      this.echoContent = '';
      this.sayContent = '';
    },
    heartCheckReset() {
      clearTimeout(this.timeoutObj);
      clearTimeout(this.serverTimeoutObj);
      this.heartCheckStart();
    },
    heartCheckStart() {
      let self = this;
      self.timeoutObj && clearTimeout(self.timeoutObj);
      self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);
      self.timeoutObj = setTimeout(() => {
        //发送空帧代替心跳包
        Socket.send("");
        self.serverTimeoutObj = setTimeout(() => {
          Socket.close();
        }, self.timeout);
      }, self.timeout)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#landlords-content {
  height: 100vh;
  display: flex;
}

#iframeDiv {
  width: 50%;
  height: 100%;
}

#contentDiv {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#contentDiv #imageEl {
  flex-shrink: 0;
}

#contentDiv .textContent {
  overflow: auto;
  margin-left: 25px;
}

.textContent::-webkit-scrollbar {
  display: none;
}

#contentDiv >>> .el-input__inner {
  border: none;
}

.el-divider--horizontal {
  margin: 5px 0;
}
</style>